<template>
    <div id="wangeditor">
        <!-- <div ref="editorElem" style="text-align:left;"></div> -->
        <div id="div1"></div>
    </div>
</template>

<script>
import E from 'wangeditor'
import axios from "axios";
export default {
    name: 'editorElem',
    data() {
        return {
            editorContent: '',
        }
    },
    //props: ['catchData'],    //接收父组件的方法
    mounted() {
        this.editor()
    },
    methods: {
        editor() {
            // var editor = new E(this.$refs.editorElem)        //创建富文本实例
            var editor = new E('#div1')
            editor.customConfig.onchange = (html) => {
                this.editorContent = html
                //   this.catchData(html)  //把这个html通过catchData的方法传入父组件
            }
            editor.customConfig.zIndex = 10000
            editor.customConfig.uploadImgServer = axios.defaults.baseURL + '/picture/'
            editor.customConfig.uploadFileName = 'file'
            //限制图片大小为10M
            editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
            editor.customConfig.withCredentials = true
            editor.customConfig.uploadImgHeaders = {
                'Accept': '*/*',

                //    'Accept': 'text/x-json'
                //  'Accept': 'multipart/form-data'
                //  'Accept': 'multipart/form-data; charset=utf-8'
                // 'Authorization': 'Bearer ' + token    //头部token
            }
            editor.customConfig.menus = [          //菜单配置
                'head',
                'list',  // 列表
                'justify',  // 对齐方式
                'bold',
                'fontSize',  // 字号
                'italic',
                'underline',
                'image',  // 插入图片
                'foreColor',  // 文字颜色
                // 'undo',  // 撤销
                // 'redo',  // 重复
            ]
            //下面是最重要的的方法

            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    // 图片上传之前触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
                    xhr
                    editor
                    files
                    window.console.log("上传之前")
                    window.console.log(xhr)
                    window.console.log(editor)
                    window.console.log(files)

                },

                error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                    window.console.log("上传出错")
                    window.console.log(xhr)
                    window.console.log(editor)
                },
                timeout: function (xhr, editor) {
                    window.console.log("上传超时")
                    window.console.log(xhr)
                    window.console.log(editor)
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                    editor
                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    insertImg(url)
                    if (result != undefined && result.meta.status == 200) {
                        window.console.log("上传成功")
                        window.console.log(result)
                        var url = axios.defaults.baseURL + result.data[0]
                        //    var url = "http://localhost:8080/book/static/%E5%9B%BE%E5%BA%93/ba4a2845-c7c5-4874-8dde-ad06275d52d0Flowing_Ribbon.jpg"
                        insertImg(url)
                    }
                    else {
                        window.console.log("上传失败")
                        // this.$message({
                        //     message: result.meta.status + result.meta.msg,
                        //     type: 'success'
                        // });
                    }
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            }
            editor.create()
        }
    }
}
</script>

<style >
.w-e-text-container {
    height: 500px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>